<script setup>
import {ref} from "vue";
import {getChildren, getRoot} from "../api/fileDirectoryApi.js";
import {toast} from "vue3-toastify";

const items = ref([]);
const getRootList = () => {
  getRoot().then(res => {
    if (res.code === 200) {
      items.value = res.data;
    } else {
      toast.error(res.msg);
    }
  })
}
getRootList();

const loadChildren = (item) => {
  getChildren(item.filePath).then(res => {
    if (res.code === 200) {
      item.children = res.data;
    } else {
      toast.error(res.msg);
    }
  })
}

const selected = defineModel('selected', {required: false})

const updateSelected = (items) => {
  selected.value = items[0];
}
</script>

<template>
  <v-treeview
      @update:activated="updateSelected"
      min-width="600px"
      min-height="300px"
      :items="items"
      color="info"
      item-value="filePath"
      item-title="fileName"
      :load-children="loadChildren"
      indeterminate-icon="mdi-file"
      activatable
  >
    <template v-slot:prepend="{ item, isOpen }">
      <v-icon :icon="item.fileType === 'file' ? 'mdi-file' : isOpen ? 'mdi-folder-open' : 'mdi-folder'"></v-icon>
    </template>
  </v-treeview>
</template>

<style scoped>

</style>